<template>
  <div class="register">
    <!-- 登录成功的弹出层 -->
    <van-popup
      class="tan"
      v-model="tantrue"
      position="top"
      :style="{ height: '10%' }"
      >登录成功</van-popup
    >

    <van-popup
      class="tan"
      v-model="tanfalse"
      position="top"
      :style="{ height: '10%' }"
      >登录失败</van-popup
    >

    <van-popup
      class="top_popup"
      v-model="loginshow"
      position="top"
      :style="{ height: '10%' }"
      >此账号还未注册</van-popup
    >
    <van-nav-bar fixed left-arrow @click-left="onClickLeft" />
    <div class="title">
      <h1>恰恰食谱</h1>
      <h1>会做饭很酷~</h1>
    </div>
    <div class="center_box">
      <h2>Welcome to 恰恰食谱</h2>

      <div class="homeinp">
        <input
          v-model="loginUser.userhome"
          type="number"
          placeholder="手机号"
        />
      </div>
      <div class="passinp">
        <input
          ref="showeye"
          v-model="loginUser.userpassword"
          type="password"
          placeholder="密码"
        />
        <div class="eye" @click="eyebtn">
          <van-icon v-show="eyes == false" name="closed-eye" size="0.5rem" />
          <van-icon v-show="eyes" name="eye-o" size="0.5rem" />
        </div>
      </div>

      <div class="home" @click="goenter">登录</div>

      <div class="pass" @click="showPopup">注册</div>
    </div>
    <!-- 注册页面 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
      <div class="close" @click="close">
        <van-icon name="cross" size="0.5rem" />
      </div>
      <div class="name_text">
        <input v-model="registerUser.nickName" type="text" placeholder="昵称" />
      </div>
      <div class="home_text">
        <input
          v-model="registerUser.userhome"
          type="number"
          placeholder="手机号"
        />
      </div>
      <div class="password_text">
        <input
          v-model="registerUser.userpassword"
          type="password"
          placeholder="密码"
        />
      </div>
      <div class="login" @click="btnlogin">注册</div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "register",
  data() {
    return {
      tantrue: false,
      tanfalse: false,
      eyes: false,
      show: false,
      loginshow: false,

      loginUser: {
        userhome: "",
        userpassword: "",
      },
      registerUser: {
        nickName: "",
        userhome: "",
        userpassword: "",
      },
    };
  },
  methods: {
    //   返回上一级
    onClickLeft() {
      console.log(111);
      this.$router.go(-1);
      // this.$router.push({ name: "home" });
    },
    // 点击关闭弹出层
    close() {
      this.show = false;
    },
    eyebtn() {
      this.eyes = !this.eyes;

      if (this.eyes == true) {
        this.$nextTick(() => {
          this.$refs.showeye.type = "text";
        });
      } else {
        this.$nextTick(() => {
          this.$refs.showeye.type = "password";
        });
      }
    },
    //   弹出层
    showPopup() {
      this.show = true;
    },

    // 点击注册本地存储
    btnlogin() {
      if (
        this.registerUser.userhome == "" ||
        this.registerUser.userpassword == "" ||
        this.registerUser.nickName == ""
      ) {
        return;
      } else {
        this.show = false;
        let loginUserlist = [
          {
            nickName: this.registerUser.nickName,
            userhome: this.registerUser.userhome,
            userpassword: this.registerUser.userpassword,
          },
        ];
        let loginUserlistjson = JSON.stringify(loginUserlist);
        localStorage.setItem("loginUserlist", loginUserlistjson);
      }
      this.registerUser.userhome = "";
      this.registerUser.userpassword = "";
      this.registerUser.nickName = "";
    },

    goenter() {
      let getloginUserlist = JSON.parse(localStorage.getItem("loginUserlist"));

      if (this.loginUser.userhome == "" || this.loginUser.userpassword == "") {
        return;
      }
      if (getloginUserlist) {
        // console.log(getloginUserlist[0].userpassword);
        // console.log(getloginUserlist[0].userhome);
        // console.log(this.loginUser.userhome);
        // console.log(this.loginUser.userpassword);
        if (
          getloginUserlist[0].userpassword == this.loginUser.userpassword &&
          this.loginUser.userhome == getloginUserlist[0].userhome
        ) {
          this.tan = true;
          setTimeout(() => {
            this.$router.push({ name: "my" });
          }, 1000);
        } else {
          this.tanfalse = true;
          console.log("登录失败");
        }

        // console.log(getloginUserlist);
        this.loginUser.userhome == "";
        this.loginUser.userpassword == "";

        localStorage.setItem("codeok", 200);
      } else if (!getloginUserlist) {
        this.loginshow = true;
        return;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.register {
  width: 100%;
  height: 100%;
  .tan {
    text-align: center;
    line-height: 50px;
  }
  .title {
    width: 80%;
    height: 100px;
    margin: 80px 10%;
    // background-color: pink;
  }
  .center_box {
    width: 80%;
    height: 250px;
    margin: 0 10%;
    h2 {
      width: 100%;
      text-align: center;
      font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
        sans-serif;
    }
    .homeinp {
      margin-top: 90px;
      width: 100%;
      height: 50px;
      border-radius: 20px;
      border: 1px solid #feca2d;
      overflow: hidden;
      input {
        width: 90%;
        height: 100%;
        margin: 0 5%;
        font-size: 0.4rem;
        border: none;
      }
    }
    .passinp {
      position: relative;
      margin-top: 10px;
      width: 100%;
      height: 50px;
      border-radius: 20px;
      border: 1px solid #feca2d;
      overflow: hidden;
      input {
        width: 90%;
        height: 100%;
        margin: 0 5%;
        border: none;
        font-size: 0.4rem;
      }
      .eye {
        position: absolute;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 30px;
        right: 10px;
        top: 15px;
        //   background-color: aqua;
      }
    }
    .home {
      margin-top: 30px;
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background-color: #feca2d;
      border-radius: 20px;
      font-size: 0.5rem;
      font-weight: bold;
    }
    .pass {
      margin-top: 10px;
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background-color: #feca2d;
      border-radius: 20px;
      font-size: 0.5rem;
      font-weight: bold;
    }
  }
  .close {
    position: absolute;
    top: 5px;
    right: 5px;
  }
  .name_text {
    width: 90%;
    height: 50px;
    border-radius: 20px;
    margin: 50px 5% 0px 5%;
    border: 1px solid #feca2d;
    overflow: hidden;
    input {
      width: 90%;
      height: 100%;
      margin: 0 5%;
      font-size: 0.4rem;
      border: none;
    }
  }
  .home_text {
    width: 90%;
    height: 50px;
    border-radius: 20px;
    margin: 20px 5% 30px 5%;
    border: 1px solid #feca2d;
    overflow: hidden;
    input {
      width: 90%;
      height: 100%;
      margin: 0 5%;
      font-size: 0.4rem;
      border: none;
    }
  }
  .password_text {
    width: 90%;
    height: 50px;
    border-radius: 20px;
    margin: 0 5%;
    border: 1px solid #feca2d;
    overflow: hidden;
    input {
      width: 90%;
      height: 100%;
      margin: 0 5%;
      font-size: 0.4rem;
      border: none;
    }
  }
  .login {
    margin-top: 10px;
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: #feca2d;
    border-radius: 20px;
    font-size: 0.5rem;
    font-weight: bold;
  }
}
.top_popup {
  text-align: center;
  line-height: 60px;
}
</style>